<ion-header>
  <ion-navbar>
    <ion-title>注册新用户</ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
  <form (ngSubmit)="formSubmit()" #ngForm="ngForm" class="myForm" validator-password-identical>
    <ion-list>
      <ion-item>
        <ion-label required>真实姓名</ion-label>
        <ion-input type="text" name="realname" placeholder="请输入真实姓名（必填）" [(ngModel)]="model.realname"
                   #realname="ngModel" required minlength="2" maxlength="4" validator-regular="chinese"></ion-input>
      </ion-item>
      <div *ngIf="realname.invalid && realname.dirty" class="form-invalid-tip">
        <div *ngIf="realname.errors.required">姓名是必填项</div>
        <div *ngIf="realname.errors.minlength">姓名至少2位字符</div>
        <div *ngIf="realname.errors.chinese">姓名必须是中文字符</div>
      </div>
      <ion-item>
        <ion-label required>用户名</ion-label>
        <ion-input type="text" name="username" placeholder="请输入用户名（必填）" autocomplete="off" [(ngModel)]="model.username"
                   #username="ngModel" required minlength="4" maxlength="20" validator-regular="legallyNamed"
                   validator-username-exist></ion-input>
        <ion-spinner item-end *ngIf="username.pending"></ion-spinner>
      </ion-item>
      <div *ngIf="username.invalid && username.dirty" class="form-invalid-tip">
        <div *ngIf="username.errors.required">用户名是必填项</div>
        <div *ngIf="username.errors.minlength">用户名至少4个字符</div>
        <div *ngIf="username.errors.legallyNamed">用户名不能包含特殊字符</div>
      </div>
      <div *ngIf="username?.errors?.exist" class="form-invalid-tip">用户名已经存在</div>
      <div class="username-tip"> 注：用户名作为您的登录帐号，注册后不可以修改</div>
      <ion-item>
        <ion-label required>密码</ion-label>
        <ion-input type="password" name="password" autocomplete="off" placeholder="请输入密码（必填）"
                   [(ngModel)]="model.password" #password="ngModel" required pattern=".{6,20}"></ion-input>
      </ion-item>
      <div *ngIf="password.invalid && password.dirty" class="form-invalid-tip">
        <div *ngIf="password.errors.required">密码是必填项</div>
        <div *ngIf="password.errors.pattern">密码长度为6到20位</div>
      </div>
      <ion-item>
        <ion-label required class="too-long">再次输入密码</ion-label>
        <ion-input type="password" name="newPassword" autocomplete="off" placeholder="请再次输入密码（必填）"
                   [(ngModel)]="model.newPassword" #newPassword="ngModel"></ion-input>
      </ion-item>
      <div *ngIf="newPassword.dirty" class="form-invalid-tip">
        <div *ngIf="ngForm.errors?.passwordInvalid">两次密码输入不一致</div>
      </div>
    </ion-list>
    <div margin-horizontal>
      <button type="submit" ion-button block [disabled]="!ngForm.form.valid">确定注册</button>
    </div>
  </form>
</ion-content>
